<template>
    <div class="FeedbackDetailContainer">
        <!-- <div class="top">
            <ul class="topUl">
                <li @click="changeFont('sub')">减小字体</li>|
                <li @click="changeFont('add')">增大字体</li>|
                <li @click="printContent">打印本页</li>|
                <li @click="close">关闭本页</li>
            </ul>
        </div> -->
        <div class="FeedbackDetail" id="articleDiv">
            <div class="head">{{proData.name}} </div>
            <div class="content" v-html="proData.cmsFeed.content" :style="`font-size:${fontSize}px`"></div>
            <div class="fileList">
                <span>相关附件：</span>
                <ul class="fileUl">
                    <li v-for="item in proData.cmsFile" :key="item.id">
                        <a :href="item.path" :download="item.name">{{item.name}}</a>
                    </li>
                </ul>
            </div>
            <div class="feedbanckDepartment"  v-if="this.admin === 'admin'">
                <p class="feedbanckDepartmentHeader">反馈部门：</p>
                <ul>
                    <li v-for="item in feedDepartmentList" :key="item.sid">
                        <span :class="`spanIcon ${item.state==='1'?'active':''}`"></span>{{item.name}}
                    </li>
                </ul>
            </div>
            <p class="feedbackEndDateHeader">反馈意见:
                
                <span class="feedbackEndDate">截止反馈时间：{{proData.cmsFeed.feedbackEndDate}}</span>
                <span class="creator">联系人：{{proData.cmsFeed.author}}</span>
            </p>
            <div class="adminContainer" v-if="this.admin === 'admin'">
                <ul>
                    <li v-for="item in proData.cmsFs" :key="item.id">
                        <span>{{item.feedbackDate}}</span>
                        <span style="margin:0 10px">{{item.deptName}}</span>
                        <span>{{item.userName}}:</span>
                        {{item.feedbackContent}}
                        <p>相关附件：
                            <span v-for="itemFile in item.cmsFile" :key="itemFile.id" style="margin-right:10px;">
                                <a :href="itemFile.path" :download="itemFile.name">{{itemFile.name}}</a>
                            </span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="sugesstContainer" v-if="this.admin !== 'admin'">
                
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    :disabled="disabled"
                    v-model="feedbackContent">
                </el-input>
                <el-upload
                    action="/ptp-cms/resource/uploadResource"
                    :on-success="fileUploadSuccess"
                    :on-remove="handleRemove"
                    :file-list="feedFile"
                    :disabled="disabled"
                    multiple>
                    <el-button size="small" class="upload-button" type="plain" icon="icon-yunduanshangchuan iconfont" :disabled="disabled"><span>附件上传</span></el-button>
                </el-upload>
                <div style="text-align:right;">
                    <el-button type="primary" @click="FeedbackOk" :disabled="disabled">确定</el-button>
                </div>
                <div class="adminContainer">
                    <ul>
                        <li v-for="item in proData.cmsFs" :key="item.id">
                            <span>{{item.feedbackDate}}</span>
                            <span style="margin:0 10px">{{item.deptName}}</span>
                            <span>{{item.userName}}:</span>
                            {{item.feedbackContent}}
                            <p>相关附件：
                                <span v-for="itemFile in item.cmsFile" :key="itemFile.id" style="margin-right:10px;">
                                    <a :href="itemFile.path" :download="itemFile.name">{{itemFile.name}}</a>
                                </span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        <!-- <div class="fotter"></div> -->
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
let Base64 = require('js-base64').Base64;
// 0:资源文件 1文本文件附件 2反馈附件  bizType(暂定文资源文件也传1，因为不区分资源文件和文本文件附件)
export default {
    name: 'FeedbackDetail',
    data () {
        return {
            admin:'', // 是否管理员
            articleId:'',
            typeId:'',
            proData:{
                name:'',
                cmsFeed:{
                    content:'',
                    feedbackEndDate:''
                },
                
                cmsFile:[],
                cmsFs:[], // 意见反馈
            },
            feedbackContent:'',
            feedFile:[],
            fontSize:14,
            disabled:false,
            feedDepartmentList:[] // 已反馈部门列表
        };
    },
    created(){
        let url = window.location.href;
        this.typeId = appUtil.getParamFromUrl(url,'typeId');
        this.articleId = appUtil.getParamFromUrl(url,'articleId');
        this.admin = appUtil.getParamFromUrl(url,'admin');
        let deptCode = '';
        if(this.admin !== 'admin'){
            // 不是管理员
            deptCode = appUtil.getLocal('orgCode');
        }
        this.getDetails(deptCode);
        // this.getDepartmentList();
    },
    methods: {
        // 获取详情clickCounter
        getDetails(deptCode){
            let data = {
                id:this.articleId,
                typeId:this.typeId,
                deptCode:deptCode
            };
            if(this.admin !== 'admin'){
                data.clickCounter = 1; //记录阅读量
                data.userCode = appUtil.getSes('userCode');
                data.userName = appUtil.getSes('userName');
                data.userId = appUtil.getSes('userId');
            }
            this.$axios.get('/ptp-cms/cmscontent/getContentDetail',{params:data}).then(res => {
                this.proData = res.data.data;
                this.getDepartmentList(this.proData.sidStates);
                if(res.data.data.cmsFs.length>0){
                    this.disabled = true;
                    this.feedbackContent = res.data.data.cmsFs[0].feedbackContent;
                    this.feedFile = res.data.data.cmsFs[0].cmsFile;
                }
                // let flag = this.timeOff(this.proData.cmsFeed.feedbackEndDate);
                // if(flag){
                //     // 时间截止
                //     this.disabled = true;
                // }
            });
        },
        // 获取部门列表
        getDepartmentList(sidStates){
            let data = {
                rgCode:Base64.decode(JSON.parse(localStorage.getItem('commonData')).svRgCode),
                setYear:Base64.decode(JSON.parse(localStorage.getItem('commonData')).svSetYear),
                agencyCode:Base64.decode(JSON.parse(localStorage.getItem('commonData')).svAgencyCode),
                orgCode:'',
                sysCode:''
            };
            this.$axios.post('/ma/api/selectPrsOrgTree',{params:data}).then((res) => {
                let departmentList = res.data.data;
                let arr = sidStates;
                for(let i=0;i<departmentList.length;i++){
                    for(let j=0;j<sidStates.length;j++){
                        if(arr[j].sid === departmentList[i].code){
                            arr[j].name = departmentList[i].name;
                        }
                    }
                }
                this.feedDepartmentList = arr;
            });
        },
        // 判断是否截止
        timeOff(time){
            if(time === null || time === ''){
                return false;
            }
            let oDate1 = Date.parse(new Date(time+' 23:59:59'));
            // 当前时间戳
            let timestamp = (new Date()).getTime();
            if(timestamp>oDate1){
                return true;
            }
            return false;
        },

        // 上传附件成功
        fileUploadSuccess(res){
            let data = res.data;
            data.bizType = '2'; // 0:文件 1文件附件 2反馈附件 
            if(data){
                this.feedFile.push(data);
            }
        },
        // 移除附件
        handleRemove(res){
            let data = res.response.data;
            this.feedFile.splice(this.feedFile.indexOf(data),1);
        },
        // 确定发布意见
        FeedbackOk(){
            let commonData  = localStorage.getItem('commonData');
            let param = {
                contentId:this.articleId,
                feedbackDate:this.proData.cmsFeed.feedbackEndDate, // 截止反馈时间
                feedbackContent:this.feedbackContent, // 反馈内容
                userId:appUtil.getSes('userId'),
                userName:appUtil.getSes('userName'),
                deptCode:appUtil.getLocal('orgCode'), // 部门CODE 没有数据暂写死
                deptName:appUtil.getLocal('orgName'), // 部门name 没有数据暂写死
                orgCode:Base64.decode(JSON.parse(commonData).svAgencyCode), // 单位CODE  
                divCode:Base64.decode(JSON.parse(commonData).svRgCode), // 区划CODE
                cmsFile:this.feedFile
            };
            this.$axios.post('/ptp-cms/cmsfeedback/saveFeekbackState',param).then((res) => {
                console.log(res);
                this.$message.success('反馈成功');
                this.disabled = true;
            });
        },
        // 改变字体
        changeFont(param){
            if(param === 'sub'){
                // 减小字体
                this.fontSize = this.fontSize - 2;
            }else{
                // 增大字体
                this.fontSize = this.fontSize + 2;
            }
        },
        // 打印
        printContent(){
            const window = process.client ? window : {};
            const document = process.client ? document : {};
            let body = window.document.body.innerHTML;
            let prnHtml = document.getElementById('articleDiv').innerHTML;
            window.document.body.innerHTML = prnHtml;
            window.print();
            window.document.body.innerHTML = body;
        },
        // 关闭
        close(){
            const window = process.client ? window : {};
            window.close();
        }
    },
};
</script>

<style lang="scss" scoped>
.FeedbackDetailContainer{
    background: #EFF3F6;
    width: 100%;
    min-height: 100vh;
    // padding: 40px 0;
    // padding-bottom: 30px;
    a{
        color: #108EE9;
    }
    .top{
        height: 40px;
        background: #108EE9;
        padding-right: 100px;
        .topUl{
            float: right;
            color: #fff;
            
            li{
                display: inline-block;
                line-height: 40px;
                cursor: pointer;
                width: 90px;
                text-align: center;
            }
        }
        
    }
    .FeedbackDetail{
        width: 75%;
        background: #fff;
        margin: 0 auto;
        height: 100vh;
        padding: 0 60px 0px 60px;
        margin: 0px auto ;
        
        .head{
            line-height: 90px;
            color: #108EE9;
            font-size: 24px;
            text-align: center;
            border-bottom: 3px solid #DFE6EC;
        }
        .content{
            margin: 0 60px;
            padding: 20px 0;
        }
        .fileUl{
            padding-left: 4px;
            display: inline-block;
            vertical-align: top;
            
        }
        .fileList{
            padding-bottom: 10px;
            
        }
        .feedbanckDepartment{
            .feedbanckDepartmentHeader{
                line-height: 30px;
            }
            ul{
                li{
                    display: inline-block;
                    width: 140px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 10px;
                    .spanIcon{
                        width: 8px;
                        height: 8px;
                        background: red;
                        display: inline-block;
                        margin-right: 4px;
                    }
                    .spanIcon.active{
                        background: rgb(7, 241, 19);
                    }
                }
            }
        }
        .adminContainer{
            
            li{
                line-height: 30px;
                span{
                    color: #108EE9;
                }
            }
        }
        // .sugesstContainer{
        // }
        .feedbackEndDateHeader{
                border-top:1px solid #eee;
                margin: 10px 0;
                padding-top: 20px;
            }
             .el-textarea__inner{
                margin-bottom: 10px;
            }
            .creator{
                float: right;
            }
            .feedbackEndDate{
                margin-left: 30px;
                color: red;
                float: right;
            }
    }
    .fotter{
        height: 30px;
    }
}

</style>
